<template>
    <!-- 查询出来的结果区域 -->
    <div class="common-table">
        <el-table ref="xxxxxTable" :data="xxxxxList" height="350px" border stripe :header-cell-style="{
            background: '#eef1f6', color: '#606266',
            textAlign: 'center', fontWeight: 'bold', borderWidth: '3px'
        }" @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="XXXXX" align="center" prop="xxxxx"></el-table-column>
            <el-table-column label="XXXXX" align="center" prop="xxxxx"></el-table-column>
            <el-table-column label="XXXXX" align="center" prop="xxxxx">
                <template slot-scope="scope">
                    <span v-if="scope.row.gender == '1'">男</span>
                    <span v-else-if="scope.row.gender == '0'">女</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '1'">有效</span>
                    <span v-else-if="scope.row.status == '0'">无效</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark"></el-table-column>
            <el-table-column label="操作" width="420px" align="center">
                <template slot-scope="scope">
                    <el-row>
                        <el-col style="width: 80px;">
                            <!-- 修改 -->
                            <el-button type="primary" icon="el-icon-edit" size="mini"
                                @click="EditXxxxx(scope.row.xxxxx(唯一性))" style="width: 75px;">编辑</el-button>
                        </el-col>
                        <el-col style="width: 80px;">
                            <!-- 删除 -->
                            <el-button type="danger" icon="el-icon-delete" size="mini"
                                @click="DeleteXxxxx(scope.row.xxxxx(唯一性))" style="width: 75px;">删除</el-button>
                        </el-col>
                        <el-col style="width: 80px;">
                            <!-- 生效 -->
                            <el-button type="success" class="iconfont icon-hrjiesuo" size="mini"
                                @click="xxxxxStateShengXiao(scope.row.xxxxx(唯一性), scope.row.status)"
                                style="width: 75px; height: 28px;">生效</el-button>
                        </el-col>
                        <el-col style="width: 80px;">
                            <!-- 失效 -->
                            <el-button type="info" class="iconfont icon-hrsuoding" size="mini"
                                @click="xxxxxStateShiXiAo(scope.row.xxxxx(唯一性), scope.row.status)"
                                style="width: 75x;height: 28px;">失效</el-button>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页组件 size-change 每页最大变化 current-change 当前最大变化 layout功能组件-->
    <div class="pager">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="xxxxxInfo.pageNumber" :page-sizes="[5, 10, 20, 50]" :page-size="xxxxxInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
<script>
export default{
    data(){
        return{
            //定义一个xxxxx数据数组(即复选框选中的数据)
         xxxxxs:[],
         total: 0,//总记录数
        }
    },
    methods: {
    handleSelectionChange() {
            //打印出来的数据 就是勾选获取的勾选那一行的数据
            //console.log(this.$refs.xxxxxTable.selection);
            /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的xxxxxs这个数组了
            this.xxxxxs = this.$refs.xxxxxTable.selection.map((item) => item.xxxxx);
            // xxxxxs 这个数组 就是由勾选每一行的id组成的数组了 xxxxx
            //console.log(this.xxxxxs, 777);
        },
        //监听 page size 改变的事件
        handleSizeChange(newSize) {
            this.xxxxxInfo.pageSize = newSize;
            this.getXxxxxData();
        },
        //监听 页码值 改变的事件
        handleCurrentChange(newPage) {
            this.xxxxxInfo.pageNum = newPage;
            this.getXxxxxData();
        },
        //编辑员工对话框
        async EditXxxxx(xxxxx) {
            const { data: res } = await this.$http.get("getEditXxxxx?xxxxx=" + xxxxx);//通过xxxxx去查询需要编辑的部门信息
            this.editXxxxxForm = res;//查询xxxxx信息反馈到表单里
            this.editDialogVisible = true;//开启编辑对话框
        },
        // 根据(字段)xxxxx删除XXXXX
        async DeleteXxxxx(xxxxx) {
            const confirmResult = await this.$confirm('此操作将永久删除XXXXXX，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirmResult != 'confirm') {//取消
                return this.$message.info("已取消删除")
            }
            const { data: res } = await this.$http.delete("deleteXxxxxx?xxxxx=" + xxxxx);
            if (res.code != 200) {
                return this.$message.error("删除失败！");
            }
            this.$message.success("删除成功！");
            this.getXxxxxData();
        },
        //根据根据XXXXX(字段)生效员工(批量生效的方法)
        async batchShengXiaoXxxxx() {
            let xxxxx字段s = [];
            this.$refs.xxxxxTable.selection.map((item) => {
                xxxxx字段s.push(item.字段);
            });
            console.log("参数为:" + xxxxx字段s);
            const { data: res } = await this.$http.put("BatchShengXiaoXxxxx", xxxxx字段s);
            if (res.code == 200) {
                this.$message.success(res.message);
                return this.getUserData();
            }
            if (res.code == 111) {
                return this.$message.error(res.message);
            }
            this.$message.error(res.message);
        },

        //根据XXXXX(字段)失效员工(批量失效的方法)
        async batchShiXiaoXxxxx() {
            let xxxxx字段s = [];
            this.$refs.userTable.selection.map((item) => {
                xxxxx字段s.push(item.字段);
            });
            console.log("参数为:" + xxxxx字段s);
            const { data: res } = await this.$http.put("BatchShiXiaoXxxxx ", xxxxx字段s);
            if (res.code == 200) {
                this.$message.success(res.message);
                return this.getUserData();
            }
            if (res.code == 112) {
                return this.$message.error(res.message);
            }
            this.$message.error(res.message);
        },
    }
}
</script>
